<template>
  <div class="orderSuccessDetail" v-if="detail" v-loading="loading">
    <span class="detailCaption">{{detail.bi1}}/{{detail.bi2}}{{$t('order.detailTitle')}}</span>
    <!-- <i class="iconfont icon-icon-test-copy-copy"></i> -->
    <div class="orderheard flexc">
      <div>
        <p>{{$t('order.subAvgPrice')}}</p>
        <span>
          {{detail.dealPriceStr || '--'}}<span class="wordWrap">{{detail.bi2}}</span>
        </span>
      </div>
      <div>
        <p>{{$t('jy.cjl')}}</p>
        <span>
          {{detail.dealCountStr || '--'}}<span class="wordWrap">{{detail.bi1}}</span>
        </span>
      </div>
      <div>
        <p>{{$t('order.subAvgMoney')}}</p>
        <span>
          {{detail.dealAmountStr || '--'}}<span class="wordWrap">{{detail.bi2}}</span>
        </span>
      </div>
      <div>
        <p>{{$t('order.subAvgTime')}}</p>
        <span>{{detail.dealTime | dateFormatBIH}}</span>
      </div>
    </div>
    <div class="orderbody flex">
      <div class="bleft">
        <div class="mk mkbuy">{{$t('jy.bid')}}</div>
        <div class="tbox">
          <span v-if="detail.bidChain && detail.bidChain">{{detail.bidChain.toUpperCase()}}{{$t('wallet.bidname')}}：</span>
          <span v-else>EOS{{$t('wallet.bidname')}}：</span>
          <div style="display: inline-block; cursor: pointer; margin-right: 4px;"
            @click="handleToNoLoggedMember">
            <img v-if="detail.bidLevel"
              :src="handleGetVipLogo(detail.bidLevel)"
              alt="" style="width: 18px;">
            <i v-else class="iconfont icon-v" style="color: #999;"></i>
          </div>
          <!-- 跳转账户 -->
          <template v-if="detail.bidAccountNo && detail.bidAccountNo.indexOf('*') === -1">
            <a @click="handleAccountDetail(detail.bidAccountNo, 'bid', 'account')"
              class="accoutTo trxidbox">
              {{detail.bidAccountNo}}
            </a>
          </template>
          <span v-else class="flex">
            <span>{{detail.bidAccountNo}}</span>
            <el-popover
              placement="bottom"
              trigger="hover">
              <div class="center" style="color: #999;">
                {{ $t('ndxStake.vipLevelThan') }}
                <span style="cursor: pointer; color: #278EDA; margin-left: 5px;" @click="handleToServices">
                  {{ $t('ndxStake.openAnonymity') }} >
                </span>
              </div>
              <div slot="reference" style="cursor: pointer;">
                <div class="tbox">
                  <i class="iconfont icon-huaban" style="margin-top: -6px;"></i>
                </div>
              </div>
            </el-popover>
          </span>
        </div>
        <div class="tbox">
          <span>{{$t('jy.jsmoney')}}：</span>
          <span>{{detail.bidSettleStr}} {{detail.bi1}}</span>
        </div>
        <div class="tbox">
          <span v-if="!detail.bidSaveCharge">{{$t('order.subBidCharge')}}：</span>
          <span v-else>{{$t('order.discountedFee')}}：</span>
          <span>{{detail.bidChargeStr || 0}} {{detail.bi1}}</span>
        </div>
        <div class="tbox">
          <span>{{$t('ndxStake.saveFee')}}：</span>
          <span>{{detail.bidSaveChargeStr || 0}} {{detail.bi1}}</span>
          <el-popover
            placement="bottom"
            trigger="hover">
            <div class="center" style="color: #999;">
              {{ $t('ndxStake.detailsTip') }}
            </div>
            <div slot="reference" style="cursor: pointer;">
              <div class="tbox">
                <i class="iconfont icon-huaban"></i>
              </div>
            </div>
          </el-popover>
        </div>
        <!-- 买方交易委托 -->
        <div class="tbox">
          <span>{{$t('jy.jyweituo')}}TrxID：</span>
          <a @click="handleAccountDetail(detail.bidOrderTrxId, 'bid', 'tx')"
            v-if="detail.bidOrderTrxId && detail.bidOrderTrxId.indexOf('*') === -1"
            class="trxidbox">
            {{detail.bidOrderTrxId}}
          </a>
          <span v-else class="mr8">{{detail.bidOrderTrxId}}</span>
        </div>
        <!-- 买方成交结算 -->
        <div class="tbox">
          <span>{{$t('jy.cuohejiess')}}TrxID：</span>
          <a @click="handleAccountDetail(detail.bidTrxId, 'ask', 'tx')"
            v-if="detail.bidTrxId && detail.bidTrxId.indexOf('*') === -1"
            class="trxidbox">
            {{detail.bidTrxId}}
          </a>
          <span v-else class="mr8">{{detail.bidTrxId}}</span>
        </div>
      </div>
      <div class="bright">
        <div class="mk mksell">{{$t('jy.ask')}}</div>
        <div class="tbox">
          <span v-if="detail.askChain && detail.askChain">{{detail.askChain.toUpperCase()}}{{$t('wallet.bidname')}}：</span>
          <span v-else>EOS{{$t('wallet.bidname')}}：</span>
          <div style="display: inline-block;margin-right: 4px; cursor: pointer;"
            @click="handleToNoLoggedMember">
            <img v-if="detail.askLevel"
              :src="handleGetVipLogo(detail.askLevel)"
              alt="" style="width: 18px;">
            <i v-else class="iconfont icon-v" style="color: #999;"></i>
          </div>
          <!-- 跳转账户 -->
          <template v-if="detail.askAccountNo && detail.askAccountNo.indexOf('*') === -1">
            <a @click="handleAccountDetail(detail.askAccountNo, 'ask', 'account')"
              class="accoutTo trxidbox">
              {{detail.askAccountNo}}
            </a>
          </template>
          <span v-else class="flex">
            <span>
              {{detail.askAccountNo}}
            </span>
            <el-popover
              placement="bottom"
              trigger="hover">
              <div class="center" style="color: #999;">
                {{ $t('ndxStake.vipLevelThan') }}
                <span style="cursor: pointer; color: #278EDA; margin-left: 5px;" @click="handleToServices">
                  {{ $t('ndxStake.openAnonymity') }} >
                </span>
              </div>
              <div slot="reference" style="cursor: pointer;">
                <div class="tbox">
                  <i class="iconfont icon-huaban" style="margin-top: -6px;"></i>
                </div>
              </div>
            </el-popover>
          </span>
        </div>
        <div class="tbox">
          <span>{{$t('jy.jsmoney')}}：</span>
          <span>{{detail.askSettleStr}} {{detail.bi2}}</span>
        </div>
        <div class="tbox">
          <span v-if="!detail.askSaveCharge">{{$t('order.subBidCharge')}}：</span>
          <span v-else>{{$t('order.discountedFee')}}：</span>
          <span>{{detail.askChargeStr || 0}} {{detail.bi2}}</span>
        </div>
        <div class="tbox">
          <span>{{$t('ndxStake.saveFee')}}：</span>
          <span>{{detail.askSaveChargeStr || 0}} {{detail.bi2}}</span>
          <el-popover
            placement="bottom"
            trigger="hover">
            <div class="center" style="color: #999;">
              {{ $t('ndxStake.detailsTip') }}
            </div>
            <div slot="reference" style="cursor: pointer;">
              <div class="tbox">
                <i class="iconfont icon-huaban"></i>
              </div>
            </div>
          </el-popover>
        </div>
        <!-- 卖方交易委托 -->
        <div class="tbox">
          <span>{{$t('jy.jyweituo')}}TrxID：</span>
          <a
            @click="handleAccountDetail(detail.askOrderTrxId, 'ask', 'tx')"
            v-if="detail.askOrderTrxId && detail.askOrderTrxId.indexOf('*') === -1"
            class="trxidbox">
            {{detail.askOrderTrxId}}
          </a>
          <span v-else class="mr8">{{detail.askOrderTrxId}}</span>
        </div>
        <!-- 卖方成交结算 -->
        <div class="tbox">
          <span>{{$t('jy.cuohejiess')}}TrxID：</span>
          <a
            @click="handleAccountDetail(detail.askTrxId, 'bid', 'tx')"
            v-if="detail.askTrxId && detail.askTrxId.indexOf('*') === -1"
            class="trxidbox">
            {{detail.askTrxId}}
          </a>
          <span v-else class="mr8">{{detail.askTrxId}}</span>
        </div>
      </div>
    </div>
    <a :href="toAccountDetail" target="_blank" ref="toAccountDetail" class="hidden"></a>
  </div>
  <div style="line-height: 50px" class="center" v-else>{{$t('myWallet.loadData')}}</div>
  <!-- 跳转账户 -->
</template>

<script>
import { vipLogo } from '@/utils/wallet';
import { accMul, GetChainHref, getUrlParams, parseSymbol } from '@/utils/validate';

export default {
  name: 'OrderSuccessDetail',
  data() {
    return {
      detail: null,
      loading: false,
      user: '', // 会员等级信息
      toAccountDetail: '', // 跳转地址
    }
  },
  props: {
    orderDetailId: Number,
    embed: {
      type: Boolean,
      default: false
    },
  },
  computed: {
  },
  watch: {
    orderDetailId: function change(val) {
      if (!val) {
        this.$emit('listenDetailClose', false)
        return;
      }
      this.handleOrderSuccessDetail();
    },
    // 监听账户等级变化
    '$store.state.app.accountInfo': function change(val) {
      this.user = val;
    },
  },
  mounted() {
    this.user = this.$store.state.app.accountInfo;
    this.handleOrderSuccessDetail();
  },
  methods: {
    // 获取交易成功订单详情
    handleOrderSuccessDetail() {
      this.loading = true;
      const param = {
        id: this.orderDetailId,
      };
      this.$http.post('/order/getDealDetailById', param).then((res) => {
        if (res.code !== 0) {
          this.$emit('listenDetailClose', false);
          this.$message.error(res.msg);
          return;
        }
        // ask 卖出
        this.detail = res.dealDetail;
        if (this.detail.symbol) {
          const bi = parseSymbol(this.detail.symbol.toUpperCase());
          this.detail.bi1 = bi[1];
          this.detail.bi2 = bi[2];
        }
        setTimeout(() => {
          this.loading = false;
        }, 100);
      });
    },
    // 账号信息跳转 action--名称 way--方向 name--类型
    handleAccountDetail(action, way, name) {
      let chain = this.detail.bidChain;
      if (way === 'ask') {
        chain = this.detail.askChain;
      }
      this.toAccountDetail = `${GetChainHref(chain)}/${name}/${action}`;
      if ((chain === 'enu' || chain === 'fibos') && name === 'account') {
        this.toAccountDetail = `${GetChainHref(chain)}/accounts/${action}`;
      }
      if ((chain === 'enu' || chain === 'fibos') && name === 'tx') {
        this.toAccountDetail = `${GetChainHref(chain)}/transactions/${action}`;
      }
      if (this.embed && name === 'tx') {
        const paUrl = getUrlParams(window.location.href);
        if (paUrl && paUrl.ref === 'bloks' && chain.toUpperCase() === 'EOS') {
          this.toAccountDetail = `https://bloks.io/transaction/${action}`;
        }
      }
      this.$nextTick(() => {
        this.$refs.toAccountDetail.click();
      });
    },
    // 跳到会员服务
    handleToServices() {
      this.$router.push({
        name: 'services'
      });
    },
    // 跳转到未登录会员页面
    handleToNoLoggedMember() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity) {
        this.$router.push('/member');
        return;
      }
      this.$router.push('/member-not-logged');
    },
    // 获取VIP - Logo
    handleGetVipLogo(memberLevel) {
      return vipLogo(memberLevel)
    },
    // 两数相乘
    accMul(num1, num2) {
      return accMul(num1, num2)
    },
    parseSymbol(a, b) {
      return parseSymbol(a, b)
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-clolor: #278eda;
$-clolor2: RGBA(20, 159, 252, 1.00);

.colorThis {
  color: $-clolor !important;
  cursor: pointer;
}

.mediumLatency {
  color: #FF9800 !important;
}

.icon-huaban {
  font-size: 16px;
  margin-left: 5px;
  color: #999;
}

.mr8 {
  margin-bottom: -8px !important;
}

.orderSuccessDetail {
  position: relative;
  min-height: 230px;
  padding-bottom: 10px;
  .detailCaption {
    display: block;
    text-align: center;
    margin: -35px 50px 23px;
    font-size: 18px;
    color: #333;
  }
  .icon-icon-test-copy-copy {
    position: absolute;
    bottom: -10px;
    right: 0;
    font-size: 25px;
    color: #999;
  }

  .orderheard {
    padding: 0 80px 30px;
    justify-content: space-between;
    border-bottom: 1px dotted #dedede;

    .wordWrap {
      display: inline-block;
      padding-left: 5px;
    }

    div {
      font-size: 14px;

      p {
        color: #999;
        padding: 0 0 5px;
      }

      span {
        color: #333;
        font-size: 14px;
      }
    }
  }

  .orderbody {
    padding: 30px 80px 0;

    .bleft {
      min-width: 370px;

      .mkbuy {
        background: RGBA(4, 150, 28, 1.00);
      }

      .tbox {
        line-height: 20px;
      }
    }

    .bright {
      .mksell {
         background: RGBA(255, 19, 44, 1.00);
      }

      .tbox {
        line-height: 20px;
      }
    }

    .bleft .mk, .bright .mk {
      color: #fff;
      display: inline-block;
      padding: 2px 15px;
      border-radius: 5px;
      font-size: 14px;
      margin-bottom: 8px;
    }

    .bleft .tbox, .bright .tbox {
      padding: 3px 0;
      display: flex;
      align-items: center;

      span {
        color: #333;
        max-width: 260px;
      }

      span:first-child {
        color: #999;
      }

      .trxidbox {
        display: inline-block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        color: $-clolor !important;
      }
      .accoutTo {
        color: #333;

        &:hover {
          color: $-clolor !important;
          cursor: pointer;
        }
      }
    }
  }
}

.theme-1B1D27{
  .orderSuccessDetail .orderbody .bright .tbox span,
  .orderSuccessDetail .orderbody .bleft .tbox span, .orderbody .accoutTo {
    color: #999
  }

  .orderSuccessDetail .orderheard {
    border-color:rgba(255, 255, 255, 0.1);
  }

  .accoutTo {
    color: #999 !important;
  }
  .orderheard {
    span {
      color: #999 !important;
    }
  }
  .detailCaption {
    color: #999 !important;
  }
}
</style>
